<template>
  <div class="CODE">
    <p>验证码</p>
    <div class="code-input">
        <el-input
            placeholder="验证码"
            v-model="codeNumber"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="6"
        >
        </el-input>
    <el-button type="warning" @click="SendCode">获取验证码</el-button>
    </div>
    <div class="code-wrong">
      <span v-show="isCodeWrong">{{codeWrong}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['isLogin'],
  data () {
    return {
      codeNumber: '',
      isSendCode: false,
      isCodeWrong: this.isLogin,
      codeWrong: '验证码有误'
    }
  },
  methods: {
    SendCode () {
      this.isSendCode = true
      console.log('准备发送验证码')
      console.log('|')
    }
  },
  watch: {
    codeNumber (newVal) {
      let length
      if (newVal) {
        this.isCodeWrong = false
        length = newVal.length
        if (length === 1) {
          console.log('开始输入验证码')
          console.log('|')
        }
        if (length === 6) {
          console.log('验证码输入完成')
          console.log('|')
        }
      }
    },
    isLogin (newVal) {
      if (newVal) {
        this.isCodeWrong = newVal
      }
    }
  }
}
</script>

<style lang="scss">
.CODE {
  p {
    margin-left: 10%;
    font-family: 微软雅黑;
    font-size: 14px;
    font-weight: bold;
  }
  div {
    display: table;
    text-align: left;
    margin-left: 15%;
    .el-input {
      display: table-cell;
      width: 50%;
    }
    input {
      width: 70%;
      margin: 0 auto;
      border-bottom: 1px solid #E4E4E4;
      border-top:0px;
      border-left:0px;
      border-right:0px;
    }
    button {
      background: #E9BD7A;
    }
  }
  .code-wrong {
    text-align: left;
    margin-left: 20%;
    margin-top: 2%;
    font-size: 10px;
    font-weight: bold;
    color: firebrick;
  }
}
</style>
